import React, { Component } from 'react';
import {render} from 'react-dom';
import Browser from './Browser';
import BrowserView from './BrowserView';
import BrowserTab from './BrowserTab';
import Webview from './Webview';
import { Tabs } from 'react-bootstrap';
import { Tab } from 'react-bootstrap';
import {TabContent} from 'react-bootstrap';
import {Button} from 'react-bootstrap';
import {ButtonToolbar} from 'react-bootstrap';
import Close from 'material-ui-icons/Close';
import { withStyles } from 'material-ui/styles';
import ButtonMUI from 'material-ui/Button';
import AddIcon from 'material-ui-icons/Add';

  const styles = theme => ({
    button: {
      margin: theme.spacing.unit,
    },
    webviewStyle:{
        height:667,
    }
  });

class BrowserContainer extends Component {
    constructor(props){
        super(props);
    }
    /*
    handleSelect(event) {
        alert(event.target.eventKey);
      }
*/
    render(){
        const { classes } = this.props;
        //let webviewId=0;
        let browsersTabsAndContent = this.props.browserList.map((browser) => {
            return  <Tab key={browser.browserId}  eventKey={browser.browserId} title={browser.browserId}>
                    <TabContent>
                        <webview src={browser.webaddress} className={classes.webviewStyle}  ></webview>
                    </TabContent>
                    </Tab>
        });
        let newTabEventKey = -1;
        // this.props.browserList.length;
        let newTab = (
                    <Tab  eventKey={newTabEventKey} title={'+'}  >
                    <TabContent>
                        <webview src={this.props.newTab.webaddress} className={classes.webviewStyle} ></webview>
                    </TabContent>
                    </Tab>
        );

        return (
            <div>
                <Tabs activeKey={this.props.currentTab} onSelect={this.props.handleSelectTab}
                        onDoubleClick={this.props.closeCurrentTab} id="uncontrolled-tab-example">
                    {browsersTabsAndContent}
                    {newTab}
                </Tabs>
            </div>
        );
    }
}

//export default BrowserContainer;
export default withStyles(styles)(BrowserContainer);